<script setup lang="ts">
import * as echarts from 'echarts';
import {useResizeObserver} from "@vueuse/core";

let myChart: echarts.ECharts | null = null

const showEcharts = () => {
  const chartDom = document.getElementById('main3');
  myChart = echarts.init(chartDom);
  let option;

  option = {
    title: {
      text: 'Funnel'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        dataView: {readOnly: false},
        restore: {},
        saveAsImage: {}
      }
    },
    legend: {
      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
      bottom: '3%',
    },
    series: [
      {
        name: 'Expected',
        type: 'funnel',
        left: '10%',
        width: '80%',
        label: {
          formatter: '{b}Expected'
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          opacity: 0.7
        },
        emphasis: {
          label: {
            position: 'inside',
            formatter: '{b}Expected: {c}%'
          }
        },
        data: [
          {value: 60, name: 'Visit'},
          {value: 40, name: 'Inquiry'},
          {value: 20, name: 'Order'},
          {value: 80, name: 'Click'},
          {value: 100, name: 'Show'}
        ]
      },
      {
        name: 'Actual',
        type: 'funnel',
        left: '10%',
        width: '80%',
        maxSize: '80%',
        label: {
          position: 'inside',
          formatter: '{c}%',
          // color: '#fff'
        },
        itemStyle: {
          opacity: 0.5,
          // borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            position: 'inside',
            formatter: '{b}Actual: {c}%'
          }
        },
        data: [
          {value: 30, name: 'Visit'},
          {value: 10, name: 'Inquiry'},
          {value: 5, name: 'Order'},
          {value: 50, name: 'Click'},
          {value: 80, name: 'Show'}
        ],
// Ensure outer shape will not be over inner shape when hover.
        z: 100
      }
    ]
  };

  option && myChart.setOption(option);
}
onMounted(() => {
  showEcharts()
})

// 监听视口大小 useResizeObserver 或者在 window.addEventListener('resize',callback) 中监听
const chartElRef = ref(null)
// 在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%
useResizeObserver(chartElRef, () => myChart?.resize())

</script>

<template>
  <div id="main3" ref="chartElRef" w-full h-400px>

  </div>
</template>

<style scoped>

</style>